redux-persist failed to create sync storage - nextjs

You're encountering two common Redux errors, which usually happen during setup:

❗ Error 1:

redux-persist failed to create sync storage. falling back to noop storage.

✅ Reason:

This typically means you are trying to use localStorage or sessionStorage in a non-browser environment, such as Next.js SSR (Server-Side Rendering).

💡 Solution:

Only use redux-persist's storage on the client. In persistConfig, wrap the setup like this:

// store.ts
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // defaults to localStorage
import { combineReducers } from "@reduxjs/toolkit";

const rootReducer = combineReducers({
  // your reducers here
});

const persistConfig = {
  key: "root",
  storage: typeof window !== "undefined" ? storage : undefined,
  whitelist: ["yourReducerName"], // reducers to persist
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

❗ Error 2:

Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.

✅ Reason:

You probably passed an empty object or a wrong structure to combineReducers().

💡 Solution:

Make sure you're importing actual reducers correctly. Example:

// features/ui/uiSlice.ts
import { createSlice } from "@reduxjs/toolkit";

const initialState = { theme: "light" };

export const uiSlice = createSlice({
  name: "ui",
  initialState,
  reducers: {
    toggleTheme: (state) => {
      state.theme = state.theme === "light" ? "dark" : "light";
    },
  },
});

export const { toggleTheme } = uiSlice.actions;
export default uiSlice.reducer;

Then in your store:

// store.ts
import { configureStore } from "@reduxjs/toolkit";
import { combineReducers } from "redux";
import uiReducer from "@/features/ui/uiSlice";

const rootReducer = combineReducers({
  ui: uiReducer,
  // other reducers here
});

export const store = configureStore({
  reducer: rootReducer,
});

✅ Summary